<template>
  <div class="loginbody">
    <div class="title">LOGIN</div>
    <input class="myinput" placeholder="用户名" v-model="username" />
    <input
      class="myinput"
      placeholder="密码"
      type="password"
      v-model="password"
    />
    <button class="mybutton" @click="login">登录/注册</button>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8082";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      this.$store.state.username = this.username;
      window.localStorage.setItem("curname", this.username);
      let token = window.localStorage.getItem(this.username);
      axios
        .get("/login", {
          params: {
            username: this.username,
            password: this.password,
          },
          headers: {
            Authorization: token,
          },
        })
        .then((res) => {
          //如果是首次登录就把token存入localStorage
          console.log(res.data);
          if (res.data == "wrongpsw") {
            alert('密码错误')
          } else {
            let resobj = res.data;
            if (resobj.status == 0) {
              window.localStorage.setItem(this.username, resobj.token);
              this.$store.state.username = this.username;
              this.$router.push({ path: "/mybutton" });
            } else if (resobj.status == 1) {
              this.$store.state.username = this.username;
              this.$router.push({ path: "/mybutton" });
            } else if (resobj.status == 2) {
              console.log("fail");
            }
            console.log(window.localStorage);
          }
        });
    },
  },
};
</script>

<style scoped>
.title {
  font-weight: bold;
  color: #e7e0ed;
  margin-bottom: 20px;
}
.loginbody {
  margin: 80px auto;
  padding: 30px 50px;
  border-radius: 10px;
  border: 0.8px solid #e2f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);
}
.myinput {
  height: 16px;
  width: 240px;
  border-radius: 25px;
  border: 0.8px solid #e7e0ed;
  padding: 11px;
  background-color: transparent;
  color: #e2f4f4;
  outline: none;
  margin-bottom: 20px;
}
.mybutton {
  border-radius: 20px;
  border: none;
  padding: 6px;
  box-shadow: 6px 6px 7px #32114b;
  background-color: #f3ecf7;
  color: #650b96;
  width: 100px;
  text-align: center;
  height: 35px !important;
  outline: none;
  font-weight: bold;
}
input::-webkit-input-placeholder {
  color: #e2f4f4;
}
</style>